<template>
    <div class="singerCard">
        <div class="tab" >
            {{name}}:  
            <span :class="index==active?'active':''" v-for="(item,index) in dataone" :key="index" @click="clicktab(index,item)">{{item}}   <span v-if="index!=dataone.length-1"><i>|</i></span></span>
        </div>
        
    </div>
</template>

<script>
export default {
    name:"singerCard",
    props:{
        dataone:{
            type:Array
        },
        name:{
            type:String
        }
    },
    data(){
        return {
            active:0
        }
    },
    methods:{
        clicktab(a,b){
            this.active=a
            // console.log(b);
            // 向父级传递数据
            this.$emit("toFather",b)
        }
    }

}
</script>

<style scoped lang="less">
    .singerCard{
        .tab {
            span {
                cursor: pointer;
                margin-left: 10px;
                margin-right: 8px;
                text-align: center;
               span {
                   color: black;
                   background-color: #fff ;
                   margin-left: 10px;
                  
               }
            }
            .active {
                color: red;
            }
        }
    }
</style>